<template>
  <el-container>

    <div class="mar_top">
      <el-header>
        <hearderCardVue :infomountcount="infomountcount" :infoamount="infoAmount" :infotalbill="infotalBill" />
      </el-header>
      <el-main>
        <el-form :inline="true" :model="form" class="demo-form-inline">
          <el-form-item label="活动区域">
            <el-select v-model="form.partnerId" placeholder="活动区域">
              <el-option v-for="item in info_Data" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-date-picker
              v-model="day"
              lable="开始日期"
              type="daterange"
              placeholder="选择日期"
              style="width: 100%;"
              format="yyyy-MM-dd "
              value-format="yyyy-MM-dd"
            />
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" @click="search">搜索</el-button>
          </el-form-item>
        </el-form>
        <el-row :gutter="20">
          <el-col :span="4"><div class="grid-content bg-purple">
            <div class="num">笔数统计：<span>{{ infomountcount }}</span>个</div>
          </div></el-col>
          <el-col :span="4"><div class="grid-content bg-purple">
            <div class="num">收入统计：<span>{{ infoAmount/100 }}</span>个</div>
          </div>
          </el-col>
          <el-col :span="4"><div class="grid-content bg-purple">
            <div class="num">分成统计：<span>{{ infotalBill/100 }}</span>个</div>
          </div>
          </el-col>
        </el-row>
        <el-table
          :data="tableData"

          :header-cell-style="{ backgroundColor: '#f3f6fb', fontweight: 400 }"
        >
          <el-table-column
            prop="date"
            label="订单日期"
          />
          <el-table-column
            prop="ratio"
            label="合作商"
          />
          <el-table-column
            prop="ratio"
            label="分成比例"
          />
          <el-table-column
            prop="orderTotalMoney"
            label="收入(元)"
          />
          <el-table-column
            prop="orderCount"
            label="笔数"
          />
          <el-table-column
            prop="totalBill"
            label="分成金额"
          />
        </el-table>
      </el-main>
    </div>

  </el-container>
</template>

<script>
import hearderCardVue from './components/hearderCard.vue'
import { getPartner, getpartnerCollect, getorderCount, getorderAmount, gettotalBill } from '@/api/statistics'
import { getTime, getMonth, getCurrentWeekTimeRange, getCurrentTimeRange } from '@/utils/date'
export default {
  name: '',
  components: {
    hearderCardVue
  },
  filters: {

  },
  props: {
  },
  data() {
    return {
      queryObj: {
        pageIndex: 1,
        pageSize: 10000
      },
      form: {
        partnerId: '',
        start: '',
        end: '',
        pageIndex: 1,
        pageSize: 10000
      },
      info_Data: null,
      tableData: [],
      month: '', // 月份区间
      day: '', // 日期区间
      infomountcount: 0,
      infoAmount: 0,
      infotalBill: 0,
      obj: {}
    }
  },
  created() {
    this.getPartner()
    const date = getTime()
    this.month = date[0]
    this.day = date[1]
    this.getorderCount()
    this.getorderAmount()
    this.gettotalBill()
    console.log(getCurrentWeekTimeRange())
    console.log(getCurrentTimeRange())
  },
  methods: {
    async getPartner() {
      const data = await getPartner(this.queryObj)
      this.info_Data = data.currentPageRecords
    },
    async getpartnerCollect() {
      await getpartnerCollect()
    },
    async getorderCount() {
      const data = await getorderCount(getMonth())
      this.infomountcount = Number(data)
    },
    async getorderAmount() {
      const data = await getorderAmount(getMonth())
      this.infoAmount = Number(data)
    },
    async gettotalBill() {
      const data = await gettotalBill(getMonth())
      this.infotalBill = Number(data)
    },
    async search() {
      console.log(this.form.partnerId)
      console.log(this.day)
      this.obj = { start: this.day[0] + ' ' + '00:00:00', end: this.day[1] + ' ' + '23:59:59' }
      this.obj.partnerId = this.form.partnerId
      const data = await getorderCount(this.obj)
      this.infomountcount = Number(data)
      console.log(this.infomountcount)
      const datas = await getorderAmount(this.obj)
      this.infoAmount = Number(datas)
      const dataes = await gettotalBill(this.obj)
      this.infotalBill = Number(dataes)
    }
  }
}
</script>

<style scoped lang='scss'>
.mar_top{
      margin-top: 80px;
}
 .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }

  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .num{
    font-size: 14px;
    color: #333333;
    span{
    font-size: 20px;
    color: #ff5757;
    font-weight: 500;
    margin-right: 10px;
    }
  }

</style>
